<link rel="stylesheet" href="//at.alicdn.com/t/font_2259406_jy1kx749y9.css">
<style>
.navBox{
    width: 70%;
    height: 100%;
}
.navBox ul{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.navBox ul li{
    cursor: pointer;
    flex: 1;
    text-align: center;
}
.navBox ul li.active{
    color: red
}
.navBox .navCont{
    width: 100%;
    height: 200px;
    background-color: #fff;
    position: absolute;
    left: 0;
    display: none;
    z-index: 1;
}
.navCont .contList{
    display: none;
    color:#000;
    font-size: 50px;
    text-align: center;
    display: flex;
    justify-content: center;
}
.navCont .contList .smallPro{
    margin: 0 20px;
}
.navCont .contList img{
    width: 100px;
}
.navCont .contList p{
    font-size: 14px;
}
.cart{
    height: 100%;
    display: flex;
    line-height: 40px;
}
.cart .userInfo .username{
    display: none;
    height: 100%;
    position: relative;
}
.username a{
    cursor: pointer;
}
.username span{
    position: absolute;
    left:0;top:40px;
    width: 40px;height: 40px;
    background: #333;
    border-radius: 6px;
    line-height: 40px;
    text-align: center;
    margin: 0 10px;
    display: none;
    cursor: pointer;
}
.logo a{
    color: #ccc;
}
.cart a{
    color: #ccc;
    margin: 0 10px;
}

.cartCont{
    position: relative;
    display: none;
}

.cartList{
    width: 400px;max-height:500px;
    background: #fff;
    position: absolute;
    right:0;top:40px;
    z-index: 9;
    border-radius: 10px;
    border: solid 1px #aaa;
    box-shadow: 2px 2px 4px 2px rgba(200,200,200,0.5);
    display: none;
}
.cartList img{
    width: 80px;
    height: 80px;
}
.cartList .cartProList{
    max-height: 400px;
    overflow: auto;
    display: none;
}
.cartList .cartProList .list{
    display: flex;
    justify-content: space-between;
    padding: 20px;
    font-size: 14px;
    line-height: 16px;
    border-bottom: solid 1px #aaa;
    align-items: center;
}
.cartList .cartProList .list .info{
    margin-left: 10px;
    width: 240px;
}
.cartList .cartProList .list h3{
    margin: 0;
    color: #000;
    height: 16px;
    overflow: hidden;
}
.cartList .cartProList .list p:nth-child(2){
    margin: 16px 0;
    height: 16px;
    overflow: hidden;
}
.cartList .cartProList .list p:nth-child(3){
    color: red;
    font-size: 14px;
}
.cartList .cartProList .list p:nth-child(3) span{
    color: #aaa;
    font-size: 12px;
}
.cartList .cartProList .list>span{
    display: block;
    width: 16px;height: 16px;
    border: solid 2px #ccc;
    border-radius: 50%;
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    font-weight: bold;
    visibility: hidden;
}
.cartList .cartProList .list:hover>span{
    visibility: visible;
}
.cartList .cartProFoot{
    height: 100px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    justify-content: space-between;
    box-shadow: 0px -1px 5px 1px rgba(200,200,200,0.4);
    display: none;
}
.cartList .cartProFoot p{
    line-height: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.cartList .cartProFoot p em{
    font-style: normal;
    display: block;
    line-height: 24px;
}
.cartList .cartProFoot p em:nth-child(1){
    font-size: 12px;
    color: #bbb;
}
.cartList .cartProFoot p em:nth-child(1) span{
    font-weight: bold;
}
.cartList .cartProFoot p em:nth-child(2){
    font-size: 14px;
    color: #999;
}
.cartList .cartProFoot p em:nth-child(2) span{
    font-size: 16px;
    color: #d44d44;
    font-weight: bold;
}
.cartList .cartProFoot input{
    width: 140px;
    height:40px;
    background: #4b75ec;
    border: solid 1px #3d60dc;
    border-radius: 10px;
    color: #fff;
}


.empty{
    height: 300px;
    text-align: center;
    /* display: none; */
}
.empty span{
    font-size: 100px;
    line-height: 180px;
}
.empty p{
    line-height: 22px;
}
.empty p:nth-child(3){
    font-size: 14px;
}

</style>

<div class="logo">
    <a href="http://localhost/元培学院计科大前端实训/NZ002/index.html">LOGO</a>
</div>
<div class="navBox">
    <ul>
        <li class="goHome">首页</li>
        <li>坚果手机</li>
        <li>TNT</li>
        <li>官方自营</li>
        <li>服饰箱包</li>
        <li>抖音热销</li>
        <li>数码3C</li>
        <li>家居生活</li>
        <li>服务</li>
    </ul>
    <div class="navCont">
        <div class="contList" name="首页">
            首页的导航内容
        </div>
        <div class="contList" name="坚果手机">
            <div class="smallPro"><a href="http://localhost/元培学院计科大前端实训/NZ002/detail/index.html#86aivjq">
                <img src="https://resource.smartisan.com/resource/4fc4edc5973be10c3d221c592e760063.png?x-oss-process=image/resize,w_432/format,webp" alt="">
                <p>Smartisan TNT go</p>
                </a><p>￥1999.00</p>
            </div>
        </div>
        <div class="contList" name="TNT">
            TNT的导航内容
        </div>
        <div class="contList" name="官方自营">
            官方自营的导航内容
        </div>
        <div class="contList" name="服饰箱包">
            服饰箱包的导航内容
        </div>
        <div class="contList" name="抖音热销">
            抖音热销的导航内容
        </div>
        <div class="contList" name="数码3C">
            数码3C的导航内容
        </div>
        <div class="contList" name="家居生活">
            家居生活的导航内容
        </div>
        <div class="contList" name="服务">
            服务的导航内容
        </div>
    </div>
</div>
<div class="cart">
    <div class="userInfo">
        <a class="login" href="http://localhost/元培学院计科大前端实训/NZ002/login/index.html"><i class="iconfont icon-denglu"></i></a>
        <div class="username">
            <a>临时用户</a>
            <span class="quit"><i class="iconfont icon-zhuxiao"></i></span>
        </div>
    </div>
    <div class="cartCont">
        <a href="http://localhost/元培学院计科大前端实训/NZ002/cart/index.html"><i class="iconfont icon-qicheqianlian-select"></i></a>
        <div class="cartList">
            <div class="cartProList"></div>
            <div class="cartProFoot">
                <p>
                    <em>共 <span class="cartSum">1</span> 件商品</em>
                    <em>合计: <span class="cartSumPrice">1999.00</span></em>
                </p>
                <input type="button" value="去购物车">
            </div>
            <div class="empty">
                <span class="iconfont icon-qicheqianlian-select"></span>
                <p>购物车为空</p>
                <p>您还没有选购任何商品，现在前往商城选购吧！</p>
            </div>
        </div>
    </div>
</div>

<script>
    // 登录守卫
    // 获取用户信息
    var uMsg = localStorage.getItem("userMsg");
    // 解析用户信息
    if(uMsg === null){
        uMsg = [];
    }else{
        uMsg = JSON.parse(uMsg);
    }
    // 解析数组中的数据，判断isLogin是否为ok
    var flag = false;
    for(var i=0;i<uMsg.length;i++){
        if(uMsg[i].isLogin === "ok"){
            flag = true;
            break;
        }
    }
    // 判断有没有登录
    if(flag){   // 如果已经登录
        // 隐藏登录按钮
        $(".userInfo").find(".login").hide();
        // 显示用户信息，填充用户名
        $(".userInfo").find(".username").show().find("a").html(uMsg[i].un);
        // 显示购物车按钮
        $(".cartCont").show();
    }

    // 鼠标进入用户名，显示退出按钮
    $(".username").mouseover(function(){
        $(this).find("span").show();
    })
    // 鼠标离开用户名，隐藏退出按钮
    $(".username").mouseout(function(){
        $(this).find("span").hide();
    })
    // 鼠标点击退出按钮
    $(".quit").click(function(){
        // 清除登录状态
        uMsg[i].isLogin = "";
        // 覆盖用户信息
        localStorage.setItem("userMsg",JSON.stringify(uMsg));
        // 显示登录按钮
        $(".userInfo").find(".login").show();
        // 隐藏用户信息
        $(".userInfo").find(".username").hide();
        // 隐藏购物车按钮
        $(".cartCont").hide();
    })
</script>

<script src="http://localhost/元培学院计科大前端实训/NZ002/public/renderCart.js"></script>

<script>
    $(".cartCont").mouseover(function(){
        $(".cartList").show()
    })
    $(".cartCont").mouseout(function(){
        $(".cartList").hide()
    })

    renderCart();

    if(location.href.includes("cart")){
        $(".cartCont").hide();
    }
</script>

<script>
    // 给li绑定鼠标进入事件
    $(".navBox").find("li").mouseenter(function(){
        // console.log($(this).html());

        // 显示二级导航的容器
        $(".navCont").show();

        // 根据鼠标当前在哪个导航身上，获取导航的文字，根据文字，选择要显示的内容，显示，用时其他元素，隐藏
        $(".contList[name="+ $(this).html() +"]").show().siblings().hide();
    })

    // 给容器添加鼠标离开事件，这样的话，鼠标离开大框，下拉菜单才会消失
    $(".navBox").mouseleave(function(){
        // console.log("离开了");
        $(".navCont").hide();
    })

    $(".goHome").click(function(){
        location.href = "http://localhost/元培学院计科大前端实训/NZ002/index.html"
    })
</script>